<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="../../bootstrap/css/bootstrap.css">
    <link type="text/css" rel="stylesheet" href="dist/bootstrap-tagsinput.css">
    <link rel="stylesheet" href="examples/assets/app.css">

</head>
<body>
<form role="form">
    <div class="form-group">
        <label for="tagInput">输入</label>
        <input type="text" class="form-control" id="tagInput" placeholder="11111">
    </div>
</form>

</body>
<script src="../jQuery/jquery-1.11.1.js"></script>
<script src="../../bootstrap/js/bootstrap.js"></script>
<script src="dist/bootstrap-tagsinput.js"></script>
<script src="lib/typeahead.js/typeahead.bundle.js"></script>
<script>
    var citynames = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        prefetch: {
            url: 'examples/assets/citynames.json',
            filter: function(list) {
                return $.map(list, function(cityname) {
                    return { name: cityname }; });
            }
        }
    });
    citynames.initialize();


    $('input').tagsinput({
        typeaheadjs: {
            name: 'citynames',
            displayKey: 'name',
            valueKey: 'name',
            source: citynames.ttAdapter()
        }
    });
</script>
</html>